<template>
  <div class="article-manager video-icon form-submit" id="shopp-manager">
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs">
        <div slot="title" class="acea-row row-middle">
          <router-link :to="{ path: `${roterPre}/product/index` }">
            <div class="font-sm after-line">
              <span class="iconfont iconfanhui"></span>
              <span class="pl10">{{$t('page.product.back')}}</span>
            </div>
          </router-link>
          <span v-text="$route.params.id ? $t('page.product.edit_product') : $t('page.product.add_product')" class="mr20 ml16"></span>
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="new_tab">
        <Tabs v-model="currentTab" @on-click="onhangeTab">
          <TabPane
              v-for="(item, index) in headTab"
              :key="index"
              :label="item.title"
              :name="item.name"
          ></TabPane>
        </Tabs>
      </div>
      <Form
          class="formValidate mt20"
          ref="formValidate"
          :rules="ruleValidate"
          :model="formValidate"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
      >
        <Row :gutter="24" type="flex" v-show="currentTab === '1'">
          <!-- 商品信息-->
          <Col span="24">
            <FormItem :label="$t('page.product.title') + '：'" prop="store_name">
              <Input
                  v-model="formValidate.store_name"
                  :placeholder="$t('page.product.please_input_the_item_title')"
                  v-width="'50%'"
              />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem :label="$t('page.product.category') + '：'" prop="cate_id">
              <el-cascader
                  :placeholder="$t('page.product.please_select_the_category')"
                  v-width="'50%'"
                  size="mini"
                  v-model="formValidate.cate_id"
                  :options="treeSelect"
                  filterable
                  clearable>
              </el-cascader>
              <!--<span class="addClass" @click="addClass">新增分类</span>-->
            </FormItem>
          </Col>
          <Col span="24" class="brandName">
            <FormItem :label="$t('page.product.brand') + '：'" prop="">
              <Cascader
                  :data="brandData"
                  :placeholder="$t('page.product.please_select_the_brand')"
                  change-on-select
                  v-model="formValidate.brand_id"
                  filterable
                  v-width="'50%'"
              ></Cascader>
            </FormItem>
          </Col>
		  <Col span="24">
		    <FormItem :label="$t('page.product.virtual_sales')+'：'" prop="ficti">
		  		<InputNumber v-model="formValidate.ficti" v-width="'50%'"></InputNumber>
		    </FormItem>
		  </Col>
		  <Col span="24">
		    <FormItem :label="$t('page.product.MPN')+'：'" prop="mpn">
		      <Input
		          v-model="formValidate.mpn"
		          :placeholder="$t('page.product.please_input_the_MPN')"
		          v-width="'50%'"
		      />
		    </FormItem>
		  </Col>
		  <Col span="24" class="product_size">
		    <FormItem :label="$t('page.product.product_dimensions')+'：'" prop="size">
				<table style="border-collapse: collapse;text-align: center;" width="50%" border="1px solid #dcdee2">
				     <tr>
						 <td>{{$t('page.product.length')}}</td>
						 <td>{{$t('page.product.width')}}</td>
						 <td>{{$t('page.product.height')}}</td>
						 <td></td>
					 </tr>
					 <tr>
					 	 <td width="25%">
						 <Input
						     v-model="formValidate.size_data.long"
						 />
						 </td>
					 	 <td width="25%">
							 <Input
							     v-model="formValidate.size_data.width"
							 />
						 </td>
					 	 <td width="25%">
							 <Input
							     v-model="formValidate.size_data.height"
							 />
						 </td>
					 	 <td>
							 <Input
							     v-model="formValidate.size_data.unit" value="cm" disabled
							 />
							 <!-- <Select
							     v-model="formValidate.size_data.unit"
							     clearable
							     filterable
							     :transfer="true"
							     placeholder="Please select a unit"
							     >
							   <Option
							       v-for="(item, i) in size_unit_option"
							       :value="item.label"
							       :key="item.value"
							   >{{ item.label }}</Option>
							 </Select> -->
						 </td>
					 </tr>
				</table>
		      <!-- <Input
		          v-model="formValidate.mpn"
		          placeholder="请输入产品MPN"
		          v-width="'20%'"
		      />
			  <Input
			      v-model="formValidate.mpn"
			      placeholder="请输入产品MPN"
			      v-width="'20%'"
			  />
			  <Input
			      v-model="formValidate.mpn"
			      placeholder="请输入产品MPN"
			      v-width="'20%'"
			  /> -->
		    </FormItem>
		  </Col>
		  
		  <!-- <Col span="24">
		    <FormItem :label="$t('page.product.product_type')+'：'" props="package_type">
		      <RadioGroup
		          v-model="formValidate.package_type"
		          @on-change="changeSpec"
		      >
		        <Radio :label="0" class="radio">{{$t('page.product.single_box_product')}}</Radio>
		        <Radio :label="1">{{$t('page.product.combo_item')}}</Radio>
		      </RadioGroup>
		    </FormItem>
		  </Col> -->
		  
		  <Col span="24">
		    <Col span="24">
		      <FormItem :label="$t('page.product.attribute')+'：'" prop="" >
				  <el-tooltip placement="top">
					  <div slot="content">
						 {{$t('page.product.attribute_describe1')}} </br>
					  {{$t('page.product.attribute_describe2')}} </br>
					  {{$t('page.product.attribute_describe3')}} </br>
					  {{$t('page.product.attribute_describe4')}}
					  </div>
				        <i class="el-icon-question help-icon"></i>
				</el-tooltip>
		       <Col span="24">
		         <FormItem v-if="formValidate.attr_data.length !== 0">
		           <draggable
		               class="dragArea list-group"
		               :list="formValidate.attr_data"
		               group="peoples"
		               handle=".move-icon"
		               :move="checkMove"
		               @end="end"
		           >
		             <div
		                 v-for="(item, index) in formValidate.attr_data"
		                 :key="index"
		                 class="acea-row row-middle mb10"
		             >
		              <!-- <div class="move-icon">
		                 <span class="iconfont icondrag2"></span>
		               </div> -->
					   
		               <div
		                   style="width: 90%"
		                   :class="moveIndex === index ? 'borderStyle' : ''"
		               >
		                 <div class="acea-row row-middle">
		                    <!-- 名称输入框 -->
		                                <Input
		                                    v-model="item.name"
		                                    :placeholder="$t('page.product.please_input_the_name')"
		                                    class="mr5"
											                  v-width="'25%'"
		                                    @input="handleAttrChange(index, 'name', $event)"
		                                />
		                                
		                                <!-- 值输入框 -->
		                                <Input
		                                    v-model="item.value"
		                                    :placeholder="$t('page.product.please_input_the_value')"
		                                    class="mr5"
											                  v-width="'25%'"
		                                    @input="handleAttrChange(index, 'value', $event)"
		                                />
										<!-- 删除按钮 -->
										<Icon
										      type="ios-close-circle"
										      size="14"
										      class="curs"
											  @click="removeAttrData(index)"
										  />
		                 </div>
		               </div>
					   
		             </div>
		           </draggable>
		         </FormItem>
		       </Col>
		      </FormItem>
		    </Col>
			
			<Col span="24" v-if="showSxIput">
			  <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
			    <FormItem :label="$t('page.product.attribute_name')+'：'">
			      <Input
			          v-model="formSxnamic.attributeName"
			      />
			    </FormItem>
			  </Col>
			  <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
			    <FormItem label="$t('page.product.attribute_value')+'：'">
			      <Input
			          v-model="formSxnamic.attributeVal"
			          :placeholder="$t('page.product.please_specification')"
			      />
			    </FormItem>
			  </Col>
			  <Col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
			    <FormItem>
			      <Button type="primary" class="mr15" @click="createSxAttrName"
			      >{{$t('page.product.sure')}}</Button
			      >
			      <Button @click="offAttrName">{{$t('page.product.cancel')}}</Button>
			    </FormItem>
			  </Col>
			</Col>
			
			<Col span="24" v-if="createShuxin">
			  <FormItem>
			    <Button
			        type="primary"
			        icon="md-add"
			        @click="addShuXinBtn"
			        class="mr15"
			    >{{$t('page.product.add_new_attribute')}}</Button
			    >
			  </FormItem>
			</Col>
		  </Col>
<!--          <Col span="24">-->
<!--            <FormItem label="商品标签：" prop="store_label_id" class="labelClass">-->
<!--              <div class="acea-row row-middle">-->
<!--                <div class="labelInput acea-row row-between-wrapper" @click="openStoreLabel">-->
<!--                  <div style="width: 90%;">-->
<!--                    <div v-if="storeDataLabel.length">-->
<!--                      <Tag closable v-for="(item,index) in storeDataLabel" @on-close="closeStoreLabel(item)">{{item.label_name}}</Tag>-->
<!--                    </div>-->
<!--                    <span class="span" v-else>选择商品标签</span>-->
<!--                  </div>-->
<!--                  <div class="iconfont iconxiayi"></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </FormItem>-->
<!--          </Col>-->

          <Col span="24">
				<FormItem>
					<h3>{{$t('page.product.images_videos_documents')}}</h3>
					<div class="tips" id="img-tip">
						{{$t('page.product.image_describe1')}}
						<br/>
						<p v-html="$t('page.product.image_describe2')"></p>
			
						{{$t('page.product.image_describe3')}}
						<br/>
						{{$t('page.product.image_describe4')}}
					</div>
				</FormItem>

            <FormItem :label="$t('page.product.main_images')+'：'" prop="slider_image">
              
              <div class="acea-row">
                <div
                  class="pictrue"
                  v-for="(item, index) in formValidate.slider_image"
                  :key="index"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <!-- 为 img 标签添加点击事件 -->
                  <img 
                    v-lazy="item" 
                    @click="handleImageClick(index)"
                    style="cursor: pointer;"
                  />
                  <Button
                    shape="circle"
                    icon="md-close"
                    @click.native="handleRemove(index)"
                    class="btndel"
                  ></Button>
                </div>
                <div
                  v-if="formValidate.slider_image.length < 10"
                  class="upLoad acea-row row-center-wrapper"
                  @click="modalPicTap('duo')"
                >
                  <Icon type="ios-camera-outline" size="26" />
                </div>
                <Input
                  v-model="formValidate.slider_image[0]"
                  class="input-display"
                ></Input>
              </div>
            </FormItem>
          </Col>
         <!-- <Col span="24">
            <FormItem label="Add Video：">
              <i-switch v-model="formValidate.video_open" size="large">
                <span slot="open">open</span>
                <span slot="close">close</span>
              </i-switch>
            </FormItem>
          </Col> -->
          <Col span="24" v-if="formValidate.video_open">
            <FormItem :label="$t('page.product.video_type')+'：'">
              <RadioGroup v-model="seletVideo" @on-change="changeVideo">
                <Radio :label="0" class="radio">Local Video</Radio>
                <Radio :label="1">Video Link</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="24" v-if="formValidate.video_open">
            <FormItem label="" prop="video_link">
              <Input
                  v-if="seletVideo == 1 && !formValidate.video_link"
                  v-width="'50%'"
                  v-model="videoLink"
                  :placeholder="$t('page.product.video_type')"
              />
              <input
                  type="file"
                  ref="refid"
                  @change="zh_uploadFile_change"
                  class="input-display"
              />
              <div
                  v-if="
			      seletVideo == 0 &&
			      (upload_type !== '1' || videoLink) &&
			      !formValidate.video_link
			    "
                  class="ml10 videbox"
                  @click="zh_uploadFile"
              >
                +
              </div>
              <Button
                  v-if="
			      seletVideo == 1 &&
			      (upload_type !== '1' || videoLink) &&
			      !formValidate.video_link
			    "
                  type="primary"
                  icon="ios-cloud-upload-outline"
                  class="uploadVideo"
                  @click="zh_uploadFile"
              >{{$t('page.product.confirm')}}</Button>
              <Upload
                  v-if="upload_type === '1' && !videoLink"
                  :show-upload-list="false"
                  :action="fileUrl2"
                  :before-upload="videoSaveToUrl"
                  :data="uploadData"
                  :headers="header"
                  :multiple="true"
                  style="display: inline-block"
              >
                <div
                    v-if="seletVideo === 0 && !formValidate.video_link"
                    class="videbox"
                >
                  +
                </div>
              </Upload>
              <div class="iview-video-style" v-if="formValidate.video_link">
                <video
                    class="video-style"
                    :src="formValidate.video_link"
                    controls="controls"
                >
				{{$t('page.product.not_support_video_tags')}}
                </video>
                <div class="mark"></div>
                <Icon
                    type="ios-trash-outline"
                    class="iconv"
                    @click="delVideo"
                />
              </div>
              <Progress
                  class="progress"
                  :percent="progress"
                  :stroke-width="5"
                  v-if="upload.videoIng || videoIng"
              />
              <div class="tips">{{$t('page.product.suggested_duration')}}</div>
            </FormItem>
          </Col>
          <Col span="24" v-if="formValidate.is_show==2">
            <FormItem label="">
              <DatePicker type="datetime" @on-change="onchangeShow" :options="startPickOptions"  :value="formValidate.auto_on_time" v-model="formValidate.auto_on_time"  placeholder="请选择上架时间" format="yyyy-MM-dd HH:mm" style="width: 260px;"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="24" type="flex" v-show="currentTab === '2'">
          <Col span="24">
            <FormItem :label="$t('page.product.specification')+'：'" props="spec_type">
              <RadioGroup
                  v-model="formValidate.spec_type"
                  @on-change="changeSpec"
              >
                <Radio :label="0" class="radio">{{$t('page.product.single_specification')}}</Radio>
                <Radio :label="1">{{$t('page.product.multiple_specifications')}}</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <!-- 多规格添加-->
          <Col span="24" v-if="formValidate.spec_type === 1" class="noForm">
            <!-- <Col span="24" v-if="!$route.params.id"> -->
            <Col span="24">
              <FormItem :label="$t('page.product.select')+'：'" prop="" >
                <div class="acea-row row-middle">
                  <Select v-model="formValidate.selectRule" style="width: 23%">
                    <Option
                        v-for="(item, index) in ruleList"
                        :value="item.rule_name"
                        :key="index"
                    >{{ item.rule_name }}</Option
                    >
                  </Select>
                  <Button type="primary" class="mr20" @click="confirm"
                  >{{$t('page.product.confirm')}}</Button
                  >
                  <Button @click="addRule">{{$t('page.product.add_specifications')}}</Button>
                </div>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem v-if="attrs.length !== 0">
                <draggable
                    class="dragArea list-group"
                    :list="attrs"
                    group="peoples"
                    handle=".move-icon"
                    :move="checkMove"
                    @end="end"
                >
                  <div
                      v-for="(item, index) in attrs"
                      :key="index"
                      class="acea-row row-middle mb10"
                  >
                    <div class="move-icon">
                      <span class="iconfont icondrag2"></span>
                    </div>
                    <div
                        style="width: 90%"
                        :class="moveIndex === index ? 'borderStyle' : ''"
                    >
                      <div class="acea-row row-middle">
			              <span class="mr5">{{ item.value }}</span
                    ><Icon
                          type="ios-close-circle"
                          size="14"
                          class="curs"
                          @click="handleRemoveRole(index)"
                      />
                      </div>
                      <div class="rulesBox">
                        <draggable :list="item.detail" handle=".drag">
                          <Tag
                              type="dot"
                              closable
                              color="primary"
                              v-for="(j, indexn) in item.detail"
                              :key="indexn"
                              :name="j"
                              class="mr20 drag"
                              @on-close="handleRemove2(item.detail, indexn)"
                          >{{ j }}</Tag
                          >
                        </draggable>
                        <Input
                            search
                            :enter-button="$t('page.product.add')"
                            :placeholder="$t('page.product.please_input_the_attribute_name')"
                            v-model="item.detail.attrsVal"
                            @on-search="createAttr(item.detail.attrsVal, index)"
                            class="width-add"
                        />
                      </div>
                    </div>
                  </div>
                </draggable>
              </FormItem>
            </Col>
            <Col span="24" v-if="createBnt">
              <FormItem>
                <Button
                    type="primary"
                    icon="md-add"
                    @click="addBtn"
                    class="mr15"
                >{{$t('page.product.add_new_specifications')}}</Button
                >
                <Button type="success" @click="generate(1)">{{$t('page.product.submit')}}</Button>
              </FormItem>
            </Col>
            <Col span="24" v-if="showIput">
              <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <FormItem :label="$t('page.product.specifications')+'：'">
                  <Input
                      v-model="formDynamic.attrsName"
                  />
                </FormItem>
              </Col>
              <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <FormItem :label="$t('page.product.spec_value')+'：'">
                  <Input
                      v-model="formDynamic.attrsVal"
                  />
                </FormItem>
              </Col>
              <Col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
                <FormItem>
                  <Button type="primary" class="mr15" @click="createAttrName"
                  >{{$t('page.product.sure')}}</Button
                  >
                  <Button @click="offAttrName">{{$t('page.product.cancel')}}</Button>
                </FormItem>
              </Col>
            </Col>
            <!-- 多规格设置-->
            <Col
                :xl="24"
                :lg="24"
                :md="24"
                :sm="24"
                :xs="24"
                v-if="
			      manyFormValidate.length &&
			      formValidate.header.length !== 0 &&
			      attrs.length !== 0
			    "
            >
              <!-- 批量设置-->
              <Col span="24">
                <FormItem :label="$t('page.product.batch_settings')+'：'" class="labeltop">
                  <Table :data="oneFormBatch" :columns="formValidate.product_type == 1?columnsCarMy:formValidate.product_type == 3?columnsFictitious:columns2" border>
                    <template slot-scope="{ row, index }" slot="attr">
                      <div @click="batchAttr" class="acea-row row-between-wrapper" style="cursor: pointer;">
                        <div style="width: 41px;">{{oneFormBatch[0].attr}}</div>
                        <span class="iconfont icondrop-down"></span>
                      </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="pic">
                      <div
                          class="acea-row row-middle row-center-wrapper"
                          @click="modalPicTap('dan', 'duopi', index)"
                      >
                        <div
                            class="pictrue pictrueTab"
                            v-if="oneFormBatch[0].pic"
                        >
                          <img v-lazy="oneFormBatch[0].pic" />
                        </div>
                        <div
                            class="upLoad pictrueTab acea-row row-center-wrapper"
                            v-else
                        >
                          <Icon type="ios-camera-outline" size="26" class="iosfont" />
                        </div>
                      </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="code">
                      <Input v-model="oneFormBatch[0].code"></Input>
                    </template>
                    <template slot-scope="{ row, index }" slot="price">
                      <InputNumber
                          v-model="oneFormBatch[0].price"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="discount">
                      <InputNumber
                          v-model="oneFormBatch[0].discount"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="ot_price">
                      <InputNumber
                          v-model="oneFormBatch[0].ot_price"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="bar_code">
                      <Input v-model="oneFormBatch[0].bar_code"></Input>
                    </template>
                    <template slot-scope="{ row, index }" slot="weight">
                      <InputNumber
                          v-model="oneFormBatch[0].weight"
                          :step="0.1"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="volume">
                      <InputNumber
                          v-model="oneFormBatch[0].volume"
                          :step="0.1"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>

                    <template slot-scope="{ row, index }" slot="action">
                      <a @click="batchAdd">{{$t('page.product.batch_settings')}}</a>
                      <Divider type="vertical" />
                      <a @click="batchDel">{{$t('page.product.clear')}}</a>
                    </template>
                  </Table>
                </FormItem>
              </Col>
              <!-- 多规格表格-->
              <Col span="24" class="asterisk">
				<div class="asteriskInfo on">*</div>
                <FormItem :label="$t('page.product.sub_specifications_settings')+'：'" class="labeltop">
                  <Table
                      :data="manyFormValidate"
                      :columns="translatedColumns"
                      border
                  >
                   <template slot-scope="{ row, index }" v-for="(item,i) in attrData.length" :slot="'value'+(i+1)">
                      <div :class="manyFormValidate[index].select?'selectOn':''">{{manyFormValidate[index]['value'+(i+1)]}}</div>
                    </template>
                    <template slot-scope="{ row, index }" slot="pic">
                      <div
                          class="acea-row row-middle row-center-wrapper"
                          @click="modalPicTap('dan', 'duoTable', index)">
                        <div
                            class="pictrue pictrueTab"
                            v-if="manyFormValidate[index].pic">
                          <img v-lazy="manyFormValidate[index].pic" />
                        </div>
                        <div
                            class="upLoad pictrueTab acea-row row-center-wrapper"
                            v-else
                        >
                          <Icon
                              type="ios-camera-outline"
                              size="21"
                          />
                        </div>
                      </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="price">
                      <InputNumber
                          v-model="manyFormValidate[index].price"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="discount">
                      <InputNumber
                          v-model="manyFormValidate[index].discount"
                          :min="0"
                          :max="100"
                          class="priceBox"
                      >
                      </InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="ot_price">
                      <InputNumber
                          v-model="manyFormValidate[index].ot_price"
                          :min="0"
                          class="priceBox"
                      ></InputNumber>
                    </template>
                    <template slot-scope="{ row, index }" slot="fictitious">
                      <Button
                          v-if="(!manyFormValidate[index].parcel_list || !manyFormValidate[index].parcel_list.length)"
                          @click="addParcel(index)"
                      >{{$t('page.product.add_package')}}
                      </Button>
                      <span
                          v-else
                          class="seeCatMy"
                          @click="addParcel(index)"
                      >{{$t('page.product.already_set')}}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="bar_code">
                      <Input v-model="manyFormValidate[index].bar_code"></Input>
                    </template>
                    <template slot-scope="{ row, index }" slot="code">
                      <Input v-model="manyFormValidate[index].code"></Input>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                      <a @click="delAttrTable(index)">{{$t('page.product.clear')}}</a>
                    </template>
                  </Table>
                </FormItem>
              </Col>
            </Col>
          </Col>
          <!-- 单规格表格-->
          <div v-if="formValidate.spec_type === 0" style="width: 100%;">
            <Col span="24">
              <FormItem :label="$t('page.product.image')+'：'" prop="image">
                <div class="pictrueBox" @click="modalPicTap('dan', 'danTable', 0)">
                  <div class="pictrue" v-if="oneFormValidate[0].pic">
                    <img v-lazy="oneFormValidate[0].pic" />
                  </div>
                  <div class="upLoad acea-row row-center-wrapper" v-else>
                    <Input
                        v-model="oneFormValidate[0].pic"
                        class="input-display"
                    ></Input>
                    <Icon type="ios-camera-outline" size="26" />
                  </div>
                </div>
              </FormItem>
            </Col>
            <Col span="24" class="asterisk">
              <div class="asteriskInfo">*</div>
              <FormItem :label="$t('page.product.wholesale_price')+'：'">
                <InputNumber
                    v-model="oneFormValidate[0].price"
                    :min="0"
                    :max="99999999"
                    v-width="'50%'"
                ></InputNumber>
              </FormItem>
            </Col>
<!--            <Col span="24" class="asterisk">-->
<!--              <div class="asteriskInfo on">*</div>-->
<!--              <FormItem label="折扣：">-->
<!--                <InputNumber-->
<!--                    v-model="oneFormValidate[0].discount"-->
<!--                    :min="0"-->
<!--                    :max="100"-->
<!--                    v-width="'50%'"-->
<!--                ></InputNumber>-->
<!--              </FormItem>-->
<!--            </Col>-->
           <Col span="24">
             <FormItem label="原价：">
               <InputNumber
                   v-model="oneFormValidate[0].ot_price"
                   :min="0"
                   :max="99999999"
                   v-width="'50%'"
               ></InputNumber>
             </FormItem>
           </Col>

            <Col span="24" class="asterisk">
              <div class="asteriskInfo on">*</div>
              <FormItem :label="$t('page.product.SKU')+'：'">
                <Input
                    v-model.trim="oneFormValidate[0].code"
                    v-width="'50%'"
                    :placeholder="$t('page.product.enter_sku')"
                ></Input>
              </FormItem>
            </Col>
            <!-- <Col span="24" class="asterisk">
              <div class="asteriskInfo on">*</div>
              <FormItem label="包裹222：">
                <Button
                    v-if="(!oneFormValidate[0].parcel_list || !oneFormValidate[0].parcel_list.length)"
                    @click="addParcel(0)"
                >添加包裹
                </Button>
                <span
                    v-else
                    class="seeCatMy"
                    @click="addParcel(0)"
                >已设置</span>
              </FormItem>
            </Col> -->
			
			<Col span="24" class="asterisk">
			  <div class="asteriskInfo on">*</div>
			  <FormItem :label="$t('page.product.package')+'：'">
			    <Table :data="parcelNumValidateForm" :columns="parcelColumns" border>
			      <template slot-scope="{ row, index }" slot="num">
					               <Select
					                   clearable
					                   filterable
					                   v-width="'50%'"
									   v-model="row.selectedSkuId"
					                   :placeholder="$t('page.product.please_select_the_sku')"
									   @on-change="(value) => packageInfo(value, index)"
					               >
					                 <Option
					                     v-for="(item, index) in skuList"
					                      :value="item.id"
					                      :key="index"
					                  >{{ item.no }}</Option
					                  >
					                </Select>
			      </template>
			      <template slot-scope="{ row, index }" slot="length">
			        <InputNumber
			            v-model="parcelNumValidateForm[index].length"
			            :min="0"
						      :disabled="true"
			            class="priceBox"
			        ></InputNumber>
			      </template>
			      <template slot-scope="{ row, index }" slot="width">
			        <InputNumber
			            v-model="parcelNumValidateForm[index].width"
			            :min="0"
						      :disabled="true"
			            class="priceBox"
			        ></InputNumber>
			      </template>
			      <template slot-scope="{ row, index }" slot="height">
			        <InputNumber
			            v-model="parcelNumValidateForm[index].height"
			            :min="0"
						      :disabled="true"
			            class="priceBox"
			        ></InputNumber>
			      </template>
			      <template slot-scope="{ row, index }" slot="weight">
			        <InputNumber
			            v-model="parcelNumValidateForm[index].weight"
			            :min="0"
						      :disabled="true"
			            class="priceBox"
			        ></InputNumber>
			      </template>
			      <template slot-scope="{ row, index }" slot="action">
			        <a @click="parcelDel">{{$t('page.product.delete')}}</a>
			      </template>
			    </Table>
			  </FormItem>
			  <FormItem>
<!--			    <Button type="primary" @click="submitParcel()">{{$t('page.product.submit')}}</Button>-->
			    <Button @click="addDomain" icon="md-add">{{$t('page.product.add')}}</Button>
			  </FormItem>
			</Col>
          </div>
        </Row>
        <!-- 商品详情 -->
        <Row v-show="currentTab === '3'" class="mb10">

          <Col span="24" class="asterisk">

			  <FormItem>

			  </FormItem>
            <FormItem :label="$t('page.product.product_features_title')+'：'"  class="vertical-layout">
				<div class="tips" id="description-tip">
					{{$t('page.product.product_features1')}}
					<!-- 1. Features should include the following: key words, functionalities, and distinct features that will help the product stand out. -->
					<br/>
					{{$t('page.product.product_features2')}}
					<!-- 2. For images and other details, please put them in [Detailed Description]. -->
					<br/>
					{{$t('page.product.product_features3')}}
					<!-- 3. Minimum four features are required, and minimum 50 characters each for the first four features. Chinese characters are not allowed. -->
					<br/>
					{{$t('page.product.product_features4')}}
					<!-- 4. DO NOT put any information unrelated to product features and descriptions here, such as after-sales support, warranty period, promotional messages, specific carriers, personal contact info, SRP, etc. -->
				</div>
              <p v-for="(item, index) in formValidate.features" :key="index" style="margin-bottom: 10px;">
                <!-- <Input
                    v-model="formValidate.features[index]"
                    v-width="'50%'"
                    style="margin-right: 5px;"
					maxlength="500"
					show-word-limit
                /> -->
				<Input
				  type="textarea"
				  v-model="formValidate.features[index]"
				  :autosize="{ minRows: 1, maxRows: 3 }"
				  maxlength="500"
				  show-word-limit
				  style="width: 50%;"
				/>
                <Icon
                    type="ios-close-circle"
                    size="14"
                    class="curs"
                    @click="delFeatures(index)"
                />
				<Icon
				    type="md-arrow-round-down"
				    size="14"
				    class="curs"
				    @click="downFeatures(index)"
				/>
				<Icon
				    type="md-arrow-round-up"
				    size="14"
				    class="curs"
				    @click="upFeatures(index)"
				/>
              </p>
              <a @click="addFeatures()" icon="md-add">+ {{$t('page.product.add_more')}}</a>
            </FormItem>
          </Col>

          <Col span="16" :label="$t('page.product.detailed_description')+'：'">
			  <FormItem :label="$t('page.product.detailed_description')+'：'"  class="vertical-layout">
				  <wangeditor
				      style="width: 100%"
				      :content="contents"
				      @editorContent="getEditorContent"
				  ></wangeditor>
			  </FormItem>
          </Col>
          <Col span="6" style="width: 33%;margin-top: 20px;">
            <div class="ifam">
              <div class="content" v-html="content"></div>
            </div>
          </Col>
        </Row>
        <!-- 其他设置-->
        <Row v-show="currentTab === '4'">
<!--          <Col span="24">-->
<!--            <FormItem label="商品关键字：" prop="">-->
<!--              <Input-->
<!--                  v-model="formValidate.keyword"-->
<!--                  placeholder="请输入商品关键字"-->
<!--                  v-width="'50%'"-->
<!--              />-->
<!--            </FormItem>-->
<!--          </Col>-->
          <Col span="24">
            <FormItem :label="$t('page.product.product_parameter')+'：'" prop="">
              <Input
                  v-model="formValidate.store_info"
                  type="textarea"
                  :rows="3"
                  :placeholder="$t("page.product.please_parameters")"
                  v-width="'50%'"
              />
            </FormItem>
          </Col>
<!--          <Col span="24">-->
<!--            <FormItem label="商品推荐图：">-->
<!--              <div-->
<!--                  class="pictrueBox"-->
<!--                  @click="modalPicTap('dan', 'recommend_image')"-->
<!--              >-->
<!--                <div class="pictrue" v-if="formValidate.recommend_image">-->
<!--                  <img v-lazy="formValidate.recommend_image" />-->
<!--                  <Input-->
<!--                      v-model="formValidate.recommend_image"-->
<!--                      class="input-display"-->
<!--                  ></Input>-->
<!--                </div>-->
<!--                <div class="upLoad acea-row row-center-wrapper" v-else>-->
<!--                  <Input-->
<!--                      v-model="formValidate.recommend_image"-->
<!--                      class="input-display"-->
<!--                  ></Input>-->
<!--                  <Icon type="ios-camera-outline" size="26" />-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="tips">(建议图片比例5:2)</div>-->
<!--            </FormItem>-->
<!--          </Col>-->
<!--          <Col span="24">-->
<!--            <FormItem label="商品参数：" prop="">-->
<!--              <Select-->
<!--                  v-model="formValidate.specs_id"-->
<!--                  clearable-->
<!--                  filterable-->
<!--                  v-width="'50%'"-->
<!--                  placeholder="请输入商品参数"-->
<!--                  @on-change="specsInfo"-->
<!--              >-->
<!--                <Option-->
<!--                    v-for="(item, index) in specsData"-->
<!--                    :value="item.id"-->
<!--                    :key="index"-->
<!--                >{{ item.name }}</Option-->
<!--                >-->
<!--              </Select>-->
<!--            </FormItem>-->
<!--          </Col>-->
          <Col span="24" v-if="formValidate.specs_id">
            <FormItem label="" props="">
              <Table border :columns="specsColumns" :data="specsList" ref="table" class="specsList" width="700">
                <template slot-scope="{ row, index }" slot="action">
                  <a @click="delSpecs(index)" v-if="index>0">{{$t('page.product.delete')}}</a>
                </template>
              </Table>
              <Button class="mt20" @click="addSpecs">{{$t('page.product.add_parameters')}}</Button>
            </FormItem>
          </Col>
          <Col span="24" v-if="customBtn && formValidate.system_form_id">
            <FormItem label="" props="">
              <Table border :columns="formColumns" :data="formTypeList" ref="table" class="specsList on">
                <template slot-scope="{ row }" slot="require">
                  <span>{{row.require?'required':'not required'}}</span>
                </template>
              </Table>
            </FormItem>
          </Col>
        </Row>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </Form>
      <Modal
          v-model="modalPic"
          width="960px"
          scrollable
          footer-hide
          closable
          :title="$t('page.supplier.upload')+' '+$t('page.product.image')"
          :mask-closable="false"
          :z-index="1"
      >
        <uploadPictures
            :isChoice="isChoice"
            @getPic="getPic"
            @getPicD="getPicD"
            :gridBtn="gridBtn"
            :gridPic="gridPic"
            v-if="modalPic"
        ></uploadPictures>
      </Modal>
    </Card>
    <Card :bordered="false" dis-hover class="fixed-card" :style="{left: `${!menuCollapse?'200px':isMobile?'0':'80px'}`}">
      <Form>
        <FormItem>
          <Button v-if="currentTab !== '1'" @click="upTab" icon="md-arrow-round-back"></Button>
          <Button
              type="primary"
              class="submission"
              v-if="currentTab !== '3'"
              @click="downTab('formValidate')"
			  icon="md-arrow-round-forward"
          ></Button
          >
		  <!-- <Button
		      type="primary"
		      class="submission"
		      v-if="currentTab !== '4'"
		      @click="downTab('formValidate')"
		  >

		      <img :src="require('@/styles/emoji-awesome/img/qianjin.png')" alt="back" style="height: 20px;">
		</Button> -->
          <!-- <Button
              type="primary"
              :disabled="openSubimit"
              class="submission"
			  style="background-color: white;"
              @click="handleSubmit('formValidate')"
              v-if="$route.params.id || currentTab === '3'"
          > save as draft</Button
          > -->
		  <Button
		      type="primary"
		      :disabled="openSubimit"
		      class="submission"
		      @click="handleSubmit('formValidate',2)"
		  > {{$t('page.product.save_as_draft')}}</Button
		  >
		  <Button
		      type="primary"
		      :disabled="openSubimit"
		      class="submission"
		      @click="handleSubmit('formValidate',1)"
			  v-if="$route.params.id || currentTab === '3'"
		  > {{$t('page.product.submit')}}</Button
		  >
		  <Button
		      type="primary"
		      :disabled="openSubimit"
		      class="submission"
				style="display: none;"
		      @click="handleSubmit('formValidate')"
				v-if="currentTab === '3'"
		  > {{$t('page.product.submit')}}</Button
		  >
        </FormItem>
      </Form>
    </Card>
    <freightTemplate
        :template="template"
        v-on:changeTemplate="changeTemplate"
        ref="templates"
    ></freightTemplate>
    <add-attr ref="addattr" @getList="userSearchs"></add-attr>
    <!-- 商品列表 -->
    <Modal v-model="goodsModals" title="Product List" footerHide  scrollable width="900" @on-cancel="goodCancel">
      <goods-list v-if="goodsModals" ref="goodslist" @getProductId="getProductId" :ischeckbox="true"></goods-list>
    </Modal>

    <Modal
        v-model="storeLabelShow"
        scrollable
        title="Select product label"
        :closable="true"
        width="540"
        :footer-hide="true"
        :mask-closable="false"
    >
      <labelList ref="storeLabel" @activeData="activeStoreData" @close="storeLabelClose"></labelList>
    </Modal>
    <menus-from :formValidate="formBrand" :fromName='1' ref="menusFrom"></menus-from>
    <Modal v-model="attrShow"
           scrollable
           title="Please select product specifications"
           :closable="false"
           width="320"
           :footer-hide="true"
           :mask-closable="false">
      <attr-list :attrs="attrsList" @activeData="activeAttr" @close="labelAttr" @subAttrs="subAttrs" v-if="attrShow"></attr-list>
    </Modal>

    <Modal v-model="parcelShow"
           scrollable
           title="Add package"
           :closable="true"
           width="720"
           :footer-hide="true"
           :mask-closable="false"
    >
      <Form  ref="dynamicValidateForm" class="demo-dynamic">
        <FormItem label="Package information：" class="labeltop">
          <Table :data="parcelNumValidateForm" :columns="parcelColumns" border>
            <template slot-scope="{ row, index }" slot="num">
				<Select
				    v-model="parcelNumValidateForm[index].selectedSkuId"
				    clearable
				    filterable
				    v-width="'95%'"
				    placeholder="#"
					@on-change="(value) => packageInfo(value, index)"
				>
				
				  <Option
				      v-for="(item, index) in skuList"
				       :value="item.id"
				       :key="index"
				   >{{ item.no }}</Option
				   >
				 </Select>
              <!-- <Input
                  v-model="parcelNumValidateForm[index].num"
              ></Input> -->
            </template>
            <template slot-scope="{ row, index }" slot="length">
              <InputNumber
                  v-model="parcelNumValidateForm[index].length"
                  :min="0"
				          :disabled="true"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="width">
              <InputNumber
                  v-model="parcelNumValidateForm[index].width"
                  :min="0"
                  :disabled="true"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="height">
              <InputNumber
                  v-model="parcelNumValidateForm[index].height"
                  :min="0"
				          :disabled="true"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="weight">
              <InputNumber
                  v-model="parcelNumValidateForm[index].weight"
                  :min="0"
				          :disabled="true"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <a @click="parcelDel">delete</a>
            </template>
          </Table>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitParcel()">{{$t('page.product.submit')}}</Button>
          <Button @click="addDomain" icon="md-add">{{$t('page.product.newly_added')}}</Button>
        </FormItem>
      </Form>

    </Modal>

  </div>
</template>

<script>
// import COS from 'cos-js-sdk-v5'
import { mapState,mapMutations } from "vuex";
import Setting from "@/setting";
import util from "@/libs/util";
import vuedraggable from "vuedraggable";
import uploadPictures from "@/components/uploadPictures";
import freightTemplate from "@/components/freightTemplate";
import wangeditor from "@/components/wangEditor/index.vue";

import menusFrom from "../components/menusFrom";
// import userLabel from "@/components/labelList";
import labelList from "@/components/labelList";
import couponList from "@/components/couponList";
import goodsList from '@/components/goodsList/index';
import addAttr from "../components/addAttr";
import attrList from "../components/attrList";
// import addCarMy from "../components/addCarMy";
// import taoBao from './taoBao'
import {
  productInfoApi,
  cascaderList,
  productAddApi,
  generateAttrApi,
  productGetRuleApi,
  productGetTempKeysApi,
  productCache,
  cacheDelete,
  brandList,
  productCreateApi,
  uploadType,
  productAllSpecs,
  selectAllPackage
} from "@/api/product";
import { erpConfig } from "@/api/erp";
import { uploadByPieces } from "@/utils/upload"; //引入uploadByPieces方法
import { Select } from "element-ui";
export default {
  name: "product_productAdd",
  components: {
    uploadPictures,
    freightTemplate,
    goodsList,
    addAttr,
    couponList,
    // taoBao,
    // userLabel,
    menusFrom,
    attrList,
    // addCarMy,
    labelList,
    wangeditor,
    draggable: vuedraggable,
  },
  data() {
    return {
      formTypeList: [],
      formColumns: [
        {
          title: '表单标题',
          key: 'title',
          // align:'center',
          minWidth: 100
        },
        {
          title: '表单类型',
          key: 'name',
          // align:'center',
          minWidth: 100
        },
        {
          title: '是否必填',
          slot: 'require',
          // align:'center',
          minWidth: 100
        }
      ],
      roterPre: Setting.roterPre,
      specsList:[],
      specsColumns:[
        {
          title: '参数名称',
          key: 'name',
          align:'center',
          width: 150,
          render: (h, params) => {
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.name,
                  placeholder:'请输入参数名称'
                },
                on: {
                  "on-change": (e) => {
                    params.row.name = e.target.value;
                    this.specsList[params.index].name = e.target.value;
                  },
                },
              }),
            ]);
          }
        },
        {
          title: '参数值',
          key: 'value',
          align:'center',
          width: 300,
          render: (h, params) => {
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.value,
                  placeholder:'请输入参数值'
                },
                on: {
                  "on-change": (e) => {
                    params.row.value = e.target.value;
                    this.specsList[params.index].value = e.target.value;
                  },
                },
              }),
            ]);
          }
        },
        {
          title: '排序',
          key: 'sort',
          align:'center',
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("InputNumber", {
                props: {
                  value: parseInt(params.row.sort) || 0,
                  placeholder:'排序',
                  precision:0
                },
                on: {
                  "on-change": (e) => {
                    params.row.sort = e;
                    this.specsList[params.index].sort = e;
                  },
                },
              }),
            ]);
          }
        },
        {
          title: '操作',
          slot: 'action',
          align:'center',
          minWidth: 120
        }
      ],
      //自定义留言下拉选择
      customList: [
        {
          value: "text",
          label: "Text Box",
        },
        {
          value: "number",
          label: "Number",
        },
        {
          value: "email",
          label: "Email",
        },
        {
          value: "data",
          label: "Date",
        },
        {
          value: "time",
          label: "Time",
        },
        {
          value: "id",
          label: "ID Number",
        },
        {
          value: "Phone",
          label: "手机号",
        },
        {
          value: "img",
          label: "Image",
        },
      ],
      // headTab: [
      //   { title: $t('page.product.general_information'), name: "1" },
      //   { title: $t('page.product.specifications'), name: "2" },
      //   { title: $t('page.product.description'), name: "3" },
      //   // { title: "Other Settings", name: "4" },
      // ],
      virtualList:[],
      carMyShow: false,//是否开启卡密弹窗
      // recommend: [], //商品推荐
      customBtn: false, //自定义留言开关
      attrShow:false,
      parcelShow:false,
	  showSxIput:false,
      content: "",
      contents: "",
      seletVideo: 0,
      fileUrl: Setting.apiBaseURL + "/file/upload",
      fileUrl2: Setting.apiBaseURL + "/file/video_upload",
      upload_type: "", //视频上传类型 1 本地上传 2 3 4 OSS上传
      uploadData: {}, // 上传参数
      header: {},
      // dataLabel:[],
      storeDataLabel:[],
      labelShow:false,
      storeLabelShow:false,
      props: { emitPath: false, checkStrictly: true },
      type: 0,
      goodsModals: false,
      off_show: 0,
      modals: false,
      spinShow: false,
      openSubimit: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24,
      },
      // 批量设置表格data
      oneFormBatch: [
        {
          attr:"All",
          code: "",
          pic: "",
          price: 0,
          discount: 0,
          cost: 0,
          ot_price: 0,
          stock: 0,
          bar_code: "",
          weight: 0,
          volume: 0,
        },
      ],
      // 规格数据
      formDynamic: {
        attrsName: "",
        attrsVal: "",
      },
	  // 属性数据
	  formSxnamic: {
	    attributeName: "",
	    attributeVal: "",
	  },
      //包裹信息
      parcelNumValidateForm: [
        {
		  selectedSkuId:'',
          num:"",
          length: 0,
          width:0,
          height:0,
          weight:0,
        }
      ],
      parcelNumValidateFormIndex:0,
      formDynamicNameData: [],
      isBtn: false,
      
      columnsCarMy:[],
      // columns2: [
      //   {
      //     title: "Specifactions",
      //     slot: "attr",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "Image",
      //     slot: "pic",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "SKU",
      //     slot: "code",
      //     align: "center",
      //     minWidth: 120,
      //   },

      //   {
      //     title: "Wholesale Price",
      //     slot: "price",
      //     align: "center",
      //     minWidth: 95,
      //   },
      //   {
      //     title: "Operate",
      //     slot: "action",
      //     align: "center",
      //     minWidth: 140,
      //   },
      // ],
      columns: [],
      columnsInstall: [],
      columnsInstal2: [],
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
	  size_unit_option:[
		{
		    value: 'cm',
		    label: 'cm'
		}, {
		    value: 'm',
		    label: 'm'
		}, 
	  ],
      formValidate: {
		size_data:{
		  	long:"",
		  	width:"",
		  	height:'',
		  	unit:"cm",
		},
		save_type:1,
		package_type: 0,//包装类型
		size_unit: '',//产品尺寸
		mpn: '',
		auto_off_time: '',
		attr: [],
        supplier_id:0,//供应商
        is_limit:0,//是否限购开关
        limit_type:1,//1单次限购，2长期限购
        limit_num:1,//限购数量
        auto_on_time:'',
        video_open: false, //视频按钮是否显示
        store_name: "",
        freight: 1, //运费设置
        postage: 0, //设置运费金额
        custom_form: [], //自定义留言
        system_form_id: 0,//自定义表单id
        cate_id: [],
        // label_id: [],
        ensure_id:[],
        keyword: "",
        unit_name: "",
        specs_id:0,
        store_info: "",
        code:"",
        image: "",
        recommend_image: "",
        slider_image: [],
        description: "",
        ficti: 0,
        sort: 0,
        is_show: 1,
        features:[
            "",
            "",
            "",
            ""
        ],
        is_hot: 0,
        is_benefit: 0,
        is_best: 0,
        is_new: 0,
        is_good: 0,
        is_postage: 0,
        // is_sub: [],
        id: 0,
        spec_type: 0,
        video_link: "",
        temp_id: "",
        attrs: [],
		attr_data:[
      {
        name: 'Main features',
        value: ''
      },
      {
        name: 'Upholstery Material',
        value: ''
      },
      {
        name: 'Use Case',
        value: ''
      },
      {
        name: 'Place of Origin',
        value: ''
      },
		],
        items: [
          {
            pic: "",
            price: 0,
            cost: 0,
            ot_price: 0,
            stock: 0,
            bar_code: "",
            code: "",
          },
        ],
        header: [],
        selectRule: "",
        coupon_ids: [],
        command_word: "",
        delivery_type: ["1"],
        specs:[],
        recommend_list: [],
        brand_id: [],
        product_type:0,
      },
      ruleList: [],
      templateList: [],
	  createShuxin: true,
      createBnt: false,
      showIput: false,
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          pic: "",
          price: 0,
          discount: 0,
          cost: 0,
          ot_price: 0,
          bar_code: "",
          code: "",
          brokerage: 0,
          brokerage_two: 0,
          vip_price: 0,
          parcel_list: []
        },
      ],
      images: [],
      imagesTable: "",
      currentTab: "1",
      isChoice: "",
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
	  	// parcelColumns: [
	  	//   {
	  	//     title: this.$t('page.product.number'),
	  	//     slot: "num",
	  	//     align: "center",
	  	//     minWidth: 200,
	  	//   },
	  	//   {
	  	//     title: this.$t('page.product.length')+'(cm)',
	  	//     slot: "length",
	  	//     align: "center",
	  	//     minWidth: 80,
	  	//   },
	  	//   {
	  	//     title: this.$t('page.product.width')+'(cm)',
	  	//     slot: "width",
	  	//     align: "center",
	  	//     minWidth: 80,
	  	//   },
	  	//   {
	  	//     title: this.$t('page.product.height')+'(cm)',
	  	//     slot: "height",
	  	//     align: "center",
	  	//     minWidth: 80,
	  	//   },
	  	//   {
	  	//     title: this.$t('page.product.weight')+'(KG)',
	  	//     slot: "weight",
	  	//     align: "center",
	  	//     minWidth: 80,
	  	//   },
	  	//   {
	  	//     title: this.$t('page.product.operate'),
	  	//     slot: "action",
	  	//     align: "center",
	  	//     minWidth: 140,
	  	//   },
	  	// ],
      loading: false,
      modalPic: false,
      template: false,
      uploadList: [],
      treeSelect: [],
      labelSelect: [],
	  skuList:[],
      specsData:[],
      picTit: "",
      tableIndex: 0,
      ruleValidate: {
        store_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        cate_id: [
          {
            required: true,
            message: "请选择商品分类",
            trigger: "change",
            type: "array"
          },
        ],
        keyword: [
          { required: true, message: "请输入商品关键字", trigger: "blur" },
        ],
        unit_name: [
          {
            required: true,
            message: "请输入单位",
            trigger: "change",
          },
        ],
        store_info: [
          { required: true, message: "请输入商品简介", trigger: "blur" },
        ],
        //image: [{ required: true, message: "请上传商品图", trigger: "change" }],
        slider_image: [
          {
            required: true,
            message: "请上传商品轮播图",
            type: "array",
            trigger: "change",
          },
        ],
        spec_type: [
          { required: true, message: "请选择商品规格", trigger: "change" },
        ],
        selectRule: [
          { required: true, message: "请选择商品规格属性", trigger: "change" },
        ]
      },
      manyBrokerage: 0,
      manyBrokerageTwo: 0,
      manyVipPrice: 0,
      upload: {
        videoIng: false, // 是否显示进度条；
      },
      videoIng: false, // 是否显示进度条；
      progress: 0, // 进度条默认0
      videoLink: "",
      attrs: [],
      // activity: { 默认: "colorBlue", 秒杀: "colorBlue", 砍价: "colorBlue", 拼团: "colorBlue" },
      // couponName: [],
      updateIds: [],
      updateName: [],
      member: [
        {
          title: "会员价",
          slot: "vip_price",
          align: "center",
          width: 95,
        },
      ],
      columnsInstalM: [],
      moveIndex: "",
      goodsData:[],
      brandData:[],
      unitNameList:[],
      formBrand:{},
      attrsList:[],
      activeAtter:[],
      tabIndex: 0,
      tabName: "",
      attrData:[],
      datePickerOptions: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      openErp:false,
    };
  },
  computed: {
    ...mapState("admin/layout", ["isMobile","menuCollapse"]),
    labelWidth() {
      return this.isMobile ? undefined : 145;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
    labelBottom() {
      return this.isMobile ? undefined : 15;
    },
    startPickOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if(that.formValidate.auto_off_time) {
            return(
                time.getTime() > new Date(that.formValidate.auto_off_time).getTime() - 86400000
            )
          }
          return ''
        }
      }
    },
    changeUnit() {
      const { unitNameList } = this;
      const { unit_name } = this.formValidate;
      return {
        unitNameList,
        unit_name
      };
    },
	parcelColumns(){
		return [
		  {
		    title: this.$t('page.product.number'),
		    slot: "num",
		    align: "center",
		    minWidth: 200,
		  },
		  {
		    title: this.$t('page.product.length')+'(cm)',
		    slot: "length",
		    align: "center",
		    minWidth: 80,
		  },
		  {
		    title: this.$t('page.product.width')+'(cm)',
		    slot: "width",
		    align: "center",
		    minWidth: 80,
		  },
		  {
		    title: this.$t('page.product.height')+'(cm)',
		    slot: "height",
		    align: "center",
		    minWidth: 80,
		  },
		  {
		    title: this.$t('page.product.weight')+'(KG)',
		    slot: "weight",
		    align: "center",
		    minWidth: 80,
		  },
		  {
		    title: this.$t('page.product.operate'),
		    slot: "action",
		    align: "center",
		    minWidth: 140,
		  },
		]
	},
	headTab(){
		return [
		  { title: $t('page.product.general_information'), name: "1" },
		  { title: $t('page.product.specifications'), name: "2" },
		  { title: $t('page.product.description'), name: "3" },
		  // { title: "Other Settings", name: "4" },
		]
	},
	columns2(){
		return [
        {
          title: $t('page.product.specification'),
          slot: "attr",
          align: "center",
          minWidth: 80,
        },
        {
          title: $t('page.product.image'),
          slot: "pic",
          align: "center",
          minWidth: 80,
        },
        {
          title: $t('page.product.SKU'),
          slot: "code",
          align: "center",
          minWidth: 120,
        },

        {
          title: $t('page.product.wholesale_price'),
          slot: "price",
          align: "center",
          minWidth: 95,
        },
        {
          title: $t('page.product.operate'),
          slot: "action",
          align: "center",
          minWidth: 140,
        },
      ]
	},
	translatedColumns() {
	    const tableHeaderKeys = Object.keys(
	      (this.$i18n.messages && this.$i18n.messages[this.$i18n.locale] && this.$i18n.messages[this.$i18n.locale].tableHeader) || {}
	    );
	    return this.formValidate.header.map(col => {
	      // 只翻译在 tableHeader key 中存在的字段
	      const shouldTranslate = tableHeaderKeys.includes(col.title);
	      return {
	        ...col,
	        title: shouldTranslate ? this.$t(`tableHeader.${col.title}`) : col.title
	      };
	    });
	  }
  },
  watch: {
    changeUnit({ unitNameList, unit_name }) {
      if (!unit_name) {
        return;
      }
      let result = unitNameList.find(unit => unit.name == unit_name);
      if (!result) {
        this.formValidate.unit_name = '';
      }
    }
  },
  created() {
    this.columns = this.columns2.slice(1, 10);
    let data = JSON.parse(JSON.stringify(this.columns2));
    this.columnsCarMy = data;
    let fictitious = JSON.parse(JSON.stringify(this.columns2));
    fictitious.splice(8,2);
    this.columnsFictitious = fictitious;
    this.getToken();
    this.getErpConfig();
    // this.columnsInstall = this.columns2.slice(0, 4).concat(this.columnsInstall);
    // this.columnsInsta8 = this.columns2.slice(0, 4).concat(this.columnsInsta8);
  },
  mounted() {
	this.getSelectAllPackage();
    this.setCopyrightShow({ value: false });
    if ((this.$route.params.id !== "0" && this.$route.params.id) || this.$route.query.copy) {
		this.formValidate.id = this.$route.params.id
		this.getInfo();
    } else if (this.$route.params.id === "0") {
      productCache()
          .then((res) => {
            let data = res.data.info;
            if (!Array.isArray(data)) {
              let cate_id = data.cate_id.map(Number);
              // let label_id = data.label_id.map(Number);
              this.attrs = data.items || [];
              let ids = [];
              // let names = [];
              // if (data.coupons) {
              //     data.coupons.map((item) => {
              //         ids.push(item.id);
              //     });
              //     this.couponName = data.coupons;
              // }
              let brandIds = [];
              data.brand_id.forEach(item=>{
                brandIds.push(item.toString())
              })
              this.formValidate = data;
              this.formTypeList = data.custom_form_info || [];
              this.formValidate.brand_id = brandIds;
              // this.couponName = data.coupons;
              // that.couponName = names;
              this.formValidate.coupon_ids = ids;
              this.formValidate.is_limit = this.formValidate.is_limit?1:0;
              this.formValidate.limit_type = parseInt(this.formValidate.limit_type);
              // this.formValidate.is_support_refund = parseInt(this.formValidate.is_support_refund);
              this.updateIds = ids;
              this.updateName = data.coupons;
              this.formValidate.cate_id = cate_id;
              // this.dataLabel = data.label_id;
              this.storeDataLabel = data.store_label_id;
              this.specsList = data.specs;
              this.oneFormValidate = data.attrs;
              this.formValidate.header = [];
              this.generate(0);
              // this.addmanyData(data.attrs);
              // this.productTypeTap(2);
              this.columns = this.columns2.slice(1, 10);
              //this.manyFormValidate = data.attrs;
              this.formValidate.system_form_id = data.system_form_id || 0;
              if (this.formValidate.system_form_id) {
                this.customBtn = true;
              }
              this.spec_type = data.spec_type;
              this.formValidate.spec_type = data.spec_type;

              if (data.spec_type === 0) {
                this.manyFormValidate = [];
              } else {
                this.createBnt = true;
                this.oneFormValidate = [
                  {
                    pic: data.slider_image[0],
                    price: 0,
                    settle_price: 0,
                    cost: 0,
                    ot_price: 0,
                    discount: 0,
                    bar_code: "",
                    code: "",
                    brokerage: 0,
                    brokerage_two: 0,
                    vip_price: 0,
                    virtual_list: [],
                  },
                ];
              }
              this.spinShow = false;
            }
          })
          .catch((err) => {
            this.$Message.error(err.msg);
          });
    }
    if(this.$route.query.type){
      this.modals = true;
      this.type = this.$route.query.type;
    }else {
      this.type = 0;
    }
    this.goodsCategory();
    this.productGetRule();
    this.getBrandList();
    this.uploadType();
    this.getProductAllSpecs();
  },
  destroyed () {
    this.setCopyrightShow({ value: true });
  },
  methods: {
    ...mapMutations('admin/layout', [
      'setCopyrightShow'
    ]),
	// 点击图片时调用预览
	    handleImageClick(index) {
	      this.$viewerApi({
	        images: this.formValidate.slider_image,
	        options: {
	          inline: false,
	          button: false,
	          navbar: false,
	          title: false,
	          toolbar: false,
	          tooltip: false,
	          movable: false,
	          zoomable: false,
	          rotatable: false,
	          scalable: false,
	          transition: false,
	          fullscreen: false,
	          keyboard: false,
	        }
	      }).view(index);
	    },
	// 删除属性
	removeAttrData(index) {
	    this.formValidate.attr_data.splice(index, 1);
		console.log('-----------------');
		console.log(this.formValidate.attr_data)
	},
    // addDomain() {
    //   var num = ""
    //   if (this.formValidate.spec_type) {
    //     num =this.manyFormValidate[this.parcelNumValidateFormIndex].code+"-0"+(this.parcelNumValidateForm.length+1)
    //   }else {
    //     num =this.oneFormValidate[this.parcelNumValidateFormIndex].code+"-0"+(this.parcelNumValidateForm.length+1)
    //   }
    //   this.parcelNumValidateForm.push({
    //     num:num,
    //     length: 0,
    //     width:0,
    //     height:0,
    //     weight:0,
    //   });
    // },
	addDomain() {
	  const index = this.parcelNumValidateFormIndex;
	  let num = "";
	
	  if (this.formValidate.spec_type) {
	    num = this.manyFormValidate[index].code + "-0" + (this.parcelNumValidateForm.length + 1);
	  } else {
	    num = this.oneFormValidate[index].code + "-0" + (this.parcelNumValidateForm.length + 1);
	  }
	
	  this.parcelNumValidateForm.push({
	    num: num,
	    length: 0,
	    width: 0,
	    height: 0,
	    weight: 0,
	  });
	},
    //erp配置
    getErpConfig(){
      erpConfig().then(res=>{
        this.openErp = res.data.open_erp;
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
    delSpecs(index){
      this.specsList.splice(index, 1);
    },
    addSpecs(){
      let obj = {'name':'','value':'','sort':0}
      this.specsList.push(obj)
    },
    addFeatures(){
     this.formValidate.features.push("");
    },
    delFeatures(index){
      this.formValidate.features.splice(index, 1);
    },
	upFeatures(index){
		if (index > 0) {
		    const item = this.formValidate.features[index];
		    this.formValidate.features.splice(index, 1);
		    this.formValidate.features.splice(index - 1, 0, item);
		}
	},
	downFeatures(index){
		if (index < this.formValidate.features.length - 1) {
	        const item = this.formValidate.features[index];
	        this.formValidate.features.splice(index, 1);
	        this.formValidate.features.splice(index + 1, 0, item);
	    }
	},
	packageInfo(value, index) {
		console.log("value1", value);
		console.log("index1", index);
	          if (!value) {
	            // 清空选择时重置数据
	            this.parcelNumValidateForm[index] = { 
	              selectedSkuId: null, 
	              num: '', 
	              length: null, 
	              width: null, 
	              height: null, 
	              weight: null 
	            };
	            return;
	          }
	          
	          const selectedSku = this.skuList.find(item => item.id === value);
			  
	          if (selectedSku) {
				  console.log("selectedSku", selectedSku)
				  console.log("value", value)
	            // 更新当前行数据
	            this.$set(this.parcelNumValidateForm, index, {
	              selectedSkuId: value,
	              num: selectedSku.no,
	              length: selectedSku.length,
	              width: selectedSku.width,
	              height: selectedSku.height,
	              weight: selectedSku.weight
	            });
				console.log("this.parcelNumValidateForm",this.parcelNumValidateForm);
	          }
	},
    specsInfo(e){
      this.specsData.forEach(item=>{
        if(item.id == e){
          this.specsList = item.specs
        }
      })
    },
	getSelectAllPackage(){
	  selectAllPackage().then(res=>{
	    this.skuList = res.data.list
	  }).catch(err=>{
	    this.$Message.error(err.msg);
	  })
	},
    getProductAllSpecs(){
      productAllSpecs().then(res=>{
        this.specsData = res.data
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
  //   addParcel(index) {
		// console.log('------------')
		// console.log(this.manyFormValidate)
		// console.log("oneFormValidate--------",this.oneFormValidate)
  //     if (this.formValidate.spec_type){
  //       if (this.manyFormValidate[index].code == ""){
  //         this.$Message.error("请先填写规格SKU!");
  //         return
  //       }
  //       this.parcelNumValidateForm = this.manyFormValidate[index].parcel_list;

  //     }else {
  //       if (this.oneFormValidate[index].code == ""){
  //         this.$Message.error("请先填写规格SKU!");
  //         return
  //       }
  //       this.parcelNumValidateForm = this.oneFormValidate[index].parcel_list;
  //     }

  //     this.parcelNumValidateFormIndex = index
  //     this.parcelShow = true;
  //   },
  addParcel(index) {
	  console.log('manyFormValidate',this.manyFormValidate)
	  // console.log('parcelNumValidateForm', this.parcelNumValidateForm)
	  // console.log("oneFormValidate--------",this.oneFormValidate)
    if (this.formValidate.spec_type) {
      if (this.manyFormValidate[index].code === "") {
        this.$Message.error("请先填写规格SKU!");
        return;
      }
      // ✅ 深拷贝 parcel_list，避免引用污染
      // this.parcelNumValidateForm = JSON.parse(JSON.stringify(this.manyFormValidate[index].parcel_list || []));
	  this.parcelNumValidateForm = this.manyFormValidate[index].parcel_list;
	  console.log('parcelNumValidateForm11',this.parcelNumValidateForm)
    } else {
      if (this.oneFormValidate[index].code === "") {
        this.$Message.error("请先填写规格SKU!");
        return;
      }
      this.parcelNumValidateForm = JSON.parse(JSON.stringify(this.oneFormValidate[index].parcel_list || []));
    }
  
    this.parcelNumValidateFormIndex = index;
    this.parcelShow = true;
  },
    // submitParcel() {
    //   if (this.formValidate.spec_type){
    //     this.manyFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
    //   }else {
    //     this.oneFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
    //   }
    //   this.parcelShow = false;
    // },
	submitParcel() {
	  const copied = JSON.parse(JSON.stringify(this.parcelNumValidateForm));
	  if (this.formValidate.spec_type) {
	    this.$set(this.manyFormValidate[this.parcelNumValidateFormIndex], 'parcel_list', copied);
	  } else {
	    this.$set(this.oneFormValidate[this.parcelNumValidateFormIndex], 'parcel_list', copied);
	  }
	
	  this.parcelShow = false;
	},
    //定时上架
    onchangeShow(e){
      this.formValidate.auto_on_time = e
    },

    //打开属性
    batchAttr(){
      this.attrShow = true;
      // if(!this.activeAtter.length){
      //  let data = this.attrs;
      //  data.map(el=>{
      //  			el.details = [];
      //  	el.detail.map(label=>{
      //  		el.details.push({
      //  			name:label,
      //  			select:false
      //  		})
      //  	})
      //  })
      //  this.attrsList = data;
      // }
    },
    //获取属性
    getAttr(){
      this.oneFormBatch[0].attr = 'All';
      let data = this.attrs;
      data.map(el=>{
        el.details = [];
        el.detail.map(label=>{
          el.details.push({
            name:label,
            select:false
          })
        })
      })
      this.attrsList = data;
    },
    //选中属性
    activeAttr(e){
      this.attrsList = e;
    },
    //关闭属性弹窗
    labelAttr(){
      this.attrShow = false;
    },
    //多属性为空
    manyEmpty(j){
      j.pic = '';
      j.price = 0;
      j.discount = 0;
      j.cost = 0;
      j.ot_price = 0;
      j.bar_code = '';
      j.code = '';
      j.virtual_list = []
    },
    doCombination(arr) {
      var count = arr.length - 1; //数组长度(从0开始)
      var tmp = [];
      var totalArr = [];// 总数组

      return doCombinationCallback(arr, 0);//从第一个开始
      //js 没有静态数据，为了避免和外部数据混淆，需要使用闭包的形式
      function doCombinationCallback(arr, curr_index) {
        for(let val of arr[curr_index]) {
          tmp[curr_index] = val;//以curr_index为索引，加入数组
          //当前循环下标小于数组总长度，则需要继续调用方法
          if(curr_index < count) {
            doCombinationCallback(arr, curr_index + 1);//继续调用
          }else{
            totalArr.push(tmp.join(','));//(直接给push进去，push进去的不是值，而是值的地址)
          }

          //js  对象都是 地址引用(引用关系)，每次都需要重新初始化，否则 totalArr的数据都会是最后一次的 tmp 数据；
          let oldTmp = tmp;
          tmp = [];
          for(let index of oldTmp) {
            tmp.push(index);
          }
        }
        return totalArr;
      }
    },

    //提交属性值；
    subAttrs(e){
      let selectData = [];
      this.attrsList.forEach((el,index)=>{
        let obj = [];
        el.details.forEach((label)=>{
          if(label.select){
            obj.push(label.name);
          }
        })
        if(obj.length){
          selectData.push(obj)
        }
      })
      let newData = [];
      if(selectData.length){
        newData = this.doCombination(selectData);
      }
      this.attrShow = false;
      this.activeAtter = selectData;
      this.oneFormBatch[0].attr = newData.length?newData.join(';') : 'All';
      this.manyFormValidate.forEach(j=>{
        j.select = false;
        if(newData.length){
          newData.forEach(item=>{
            if(j.values.split('').length == item.split('').length){
              if(j.values == item){
                j.select = true;
              }
            }else{
              if(j.values.indexOf(item) != -1){
                j.select = true;
              }
            }
          })
        }else{
          j.select = true;
        }
      })
      this.$set(this,'manyFormValidate',this.manyFormValidate)
    },
    addClass(){
      this.$modalForm(productCreateApi()).then(() => this.goodsCategory());
    },
    activeStoreData(storeDataLabel){
      this.storeLabelShow = false;
      this.storeDataLabel = storeDataLabel;
    },
    // 标签弹窗关闭
    storeLabelClose() {
      this.storeLabelShow = false;
    },
    // 品牌列表
    getBrandList(){
      brandList().then(res=>{
        //initBran()函数作用iview中规定value必须是字符串，后台返回成了数字，用于处理这个，给了个递归；
        this.initBran(res.data);
        this.brandData = res.data;
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
    initBran(data){
      data.map(item=>{
        item.value = item.value.toString();
        if(item.children && item.children.length){
          this.initBran(item.children);
        }
      })
    },
    getProductId(e){
      this.goodsModals = false;
      let nArr = this.goodsData.concat(e).filter((element,index,self)=>{
        return self.findIndex(x=>x.product_id==element.product_id) == index
      })

      this.goodsData = nArr.slice(0,12);
    },
    goodCancel () {
      this.goodsModals = false;
    },
    // goodsTap(){
    //     this.goodsModals = true;
    //     this.$refs.goodslist.handleSelectAll();
    // },
    // bindDelete (index) {
    //     this.goodsData.splice(index, 1)
    // },
    cancel() {
      this.$router.push({path:`${Setting.roterPre}/product/index`});
    },

    videoSaveToUrl(file) {
      let imgTypeArr = ["video/mp4"];
      let imgType = imgTypeArr.indexOf(file.type) !== -1
      if (!imgType) {
        return this.$Message.warning({
          content:  'file  ' + file.name + '  格式不正确, 请选择格式正确的视频',
          duration: 5
        });
      }
      uploadByPieces({
        randoms: "", // 随机数，这里作为给后端处理分片的标识 根据项目看情况 是否要加
        file: file, // 视频实体
        pieceSize: 3, // 分片大小
        success: (data) => {
          this.formValidate.video_link = data.file_path;
          this.progress = 100;
        },
        error: (e) => {
          this.$Message.error(e.msg);
        },
        uploading: (chunk, allChunk) => {
          this.videoIng = true;
          let st = Math.floor((chunk / allChunk) * 100);
          this.progress = st;
        },
      });
      return false;
    },

    // 上传头部token
    getToken() {
      this.header["Authori-zation"] = "Bearer " + util.cookies.get("token");
    },
    // beforeUpload() {
    //   this.uploadData = {};
    //   let promise = new Promise((resolve) => {
    //     this.$nextTick(function () {
    //       resolve(true);
    //     });
    //   });
    //   return promise;
    // },
    // 上传成功
    handleSuccess(res, file, fileList) {
      if (res.status === 200) {
        this.formValidate.video_link = res.data.src;
        this.$Message.success(res.msg);
      } else {
        this.$Message.error(res.msg);
      }
    },
    //获取视频上传类型
    uploadType() {
      uploadType().then((res) => {
        this.upload_type = res.data.upload_type;
      });
    },
    getEditorContent(data) {
      this.content = data;
    },
    infoData(data){
      let cate_id = data.cate_id.map(Number);
      this.attrs = data.items || [];
      let ids = [];
      data.coupons.map((item) => {
        ids.push(item.id);
      });
      this.goodsData = data.recommend_list;
      if(data.auto_off_time){
        this.off_show = 1;
      }else{
        this.off_show = 0;
      }
      let brandIds = [];
      data.brand_id.forEach(item=>{
        brandIds.push(item.toString())
      })
	  console.log('=====================')
	  console.log(data);
      // this.formValidate = data;
	  this.price = data.price
	  this.formValidate.auto_off_time = data.auto_off_time
	  this.formValidate.store_name = data.store_name
	  // this.formValidate.attr
      this.formTypeList = data.custom_form_info;
      this.formValidate.brand_id = brandIds;
      this.formValidate.is_limit = this.formValidate.is_limit?1:0;
      this.formValidate.limit_type = parseInt(data.limit_type);
      // this.formValidate.is_support_refund = parseInt(this.formValidate.is_support_refund);
      this.contents = data.description;
      // this.couponName = data.coupons;
      this.formValidate.coupon_ids = ids;
      this.updateIds = ids;
      this.updateName = data.coupons;
	  this.formValidate.mpn = data.mpn;
      this.formValidate.cate_id = cate_id;
      this.formValidate.attr_data = data.attr_data
      // this.dataLabel = data.label_id;
      this.storeDataLabel = data.store_label_id;
      this.specsList = data.specs;
	  this.formValidate.size_data = data.size_data
      if(data.attr){
        this.oneFormValidate = [data.attr];
		this.parcelNumValidateForm = data.attr.parcel_list
      }
      this.formValidate.header = [];
	  this.manyFormValidate = data.attrs;
      this.generate(0);
      
	  console.log('manyFormValidate1',this.manyFormValidate)
      // this.addmanyData(data.attrs);
      // this.productTypeTap(2);
      this.formValidate.slider_image = data.slider_image
      this.formValidate.system_form_id = data.system_form_id || 0;
      if (this.formValidate.system_form_id) {
        this.customBtn = true;
      }
      this.formValidate.features = data.features;
      this.spec_type = data.spec_type;
      this.formValidate.spec_type = data.spec_type;

      if (data.spec_type === 0) {
        this.manyFormValidate = [];
      } else {
        this.createBnt = true;
        this.oneFormValidate = [
          {
            pic: "",
            price: 0,
            discount: 0,
            cost: 0,
            ot_price: 0,
            bar_code: "",
            code: "",
            brokerage: 0,
            brokerage_two: 0,
            vip_price: 0,
            virtual_list: [],
          },
        ];
      }
    },

    checkMove(evt) {
      this.moveIndex = evt.draggedContext.index;
    },
    end() {
      this.moveIndex = "";
    },
    //对象数组去重；
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    // 运费模板
    getList() {

    },

    // 删除视频；
    delVideo() {
      let that = this;
      that.$set(that.formValidate, "video_link", "");
      that.$set(that, "progress", 0);
      that.videoIng = false;
      that.upload.videoIng = false;
    },
    zh_uploadFile() {
      if (this.seletVideo == 1) {
        if(this.videoLink && this.$getFileType(this.videoLink) == 'video'){
          this.formValidate.video_link = this.videoLink;
        }else{
          return this.$Message.error("请输入正确的视频链接")
        }
      } else {
        this.$refs.refid.click();
      }
    },
    zh_uploadFile_change(evfile) {
      let that = this;
      let suffix = evfile.target.files[0].name.substr(
          evfile.target.files[0].name.indexOf(".")
      );
      if (suffix.indexOf(".mp4") === -1) {
        return that.$Message.error("只能上传MP4文件");
      }
	  let types = {
	    key: evfile.target.files[0].name,
	    contentType: evfile.target.files[0].type,
	  };
      productGetTempKeysApi(types)
          .then((res) => {
            that.$videoCloud
                .videoUpload({
                  type: res.data.type,
                  evfile: evfile,
                  res: res,
                  uploading(status, progress) {
                    that.upload.videoIng = status;
                    if (res.status == 200) {
                      that.progress = 100;
                    }
                  },
                })
                .then((res) => {
                  that.formValidate.video_link = res.url;
                  that.$Message.success("视频上传成功");
                  that.upload.videoIng = false;
                })
                .catch((res) => {
                  that.$Message.error(res);
                });
          })
          .catch((res) => {
            that.$Message.error(res.msg);
          });
    },
    // 上一页；
    upTab() {
      if(this.currentTab==3&&this.formValidate.product_type!=0){
        this.currentTab = (Number(this.currentTab) - 2).toString();
      }else{
        this.currentTab = (Number(this.currentTab) - 1).toString();
      }
    },
    // 下一页；
    downTab(name) {
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     if(this.formValidate.is_show == 2 && !this.formValidate.auto_on_time){
      //       return this.$Message.warning("请填写定时上架时间");
      //     }
      //     if(this.off_show == 1 && !this.formValidate.auto_off_time){
      //       return this.$Message.warning("请填写定时下架时间");
      //     }
      //     if(this.currentTab==3&&this.formValidate.product_type!=0){
      //       this.currentTab = (Number(this.currentTab) + 2).toString();
      //     }else{
      //       this.currentTab = (Number(this.currentTab) + 1).toString();
      //     }

      //   }else{
      //     this.$Message.warning("请完善数据");
      //   }
      // })
	  if(this.currentTab==3&&this.formValidate.product_type!=0){
	    this.currentTab = (Number(this.currentTab) + 2).toString();
	  }else{
	    this.currentTab = (Number(this.currentTab) + 1).toString();
	  }
    },
    // 属性弹窗回调函数；
    userSearchs() {
      this.productGetRule();
    },
    // 添加规则；
    addRule() {
      this.$refs.addattr.modal = true;
    },
    // 删除包裹
    parcelDel(index) {
      this.parcelNumValidateForm.splice(index, 1);
    },
    batchDel() {
      this.oneFormBatch = [
        {
          attr:"All",
          pic: "",
          price: 0,
          discount: 0,
          cost: 0,
          ot_price: 0,
          bar_code: "",
          code: "",
          virtualList:[],
          disk_info:''
        },
      ];
      this.activeAtter=[];
      for (let val of this.manyFormValidate) {
        val.select = true;
      }
    },
    confirm() {
      let that = this;
      that.createBnt = true;
      if (that.formValidate.selectRule.trim().length <= 0) {
        return that.$Message.error("请选择属性");
      }
      that.ruleList.forEach(function (item, index) {
        if (item.rule_name === that.formValidate.selectRule) {
          that.attrs = item.rule_value;
        }
      });
    },
    // 获取商品属性模板；
    productGetRule() {
      productGetRuleApi().then((res) => {
        this.ruleList = res.data;
      });
    },
    // 删除表格中的属性
    delAttrTable(index) {
      let id = this.$route.params.id;
      if (id) {
        // checkActivityApi(id)
        //     .then((res) => {
        this.manyFormValidate.splice(index, 1);
        this.$Message.success(res.msg);
        // })
        // .catch((res) => {
        //     this.$Message.error(res.msg);
        // });
      } else {
        this.manyFormValidate.splice(index, 1);
      }
    },
    // 批量添加
    batchAdd() {
      for (let val of this.manyFormValidate) {
        //this.manyEmpty(val);
        if(val.select){
          if (this.oneFormBatch[0].pic) {
            this.$set(val, "pic", this.oneFormBatch[0].pic);
          }
          if (this.oneFormBatch[0].price > 0) {
            this.$set(val, "price", this.oneFormBatch[0].price);
          }
          if (this.oneFormBatch[0].discount > 0) {
            this.$set(val, "discount", this.oneFormBatch[0].discount);
          }
          if (this.oneFormBatch[0].cost > 0) {
            this.$set(val, "cost", this.oneFormBatch[0].cost);
          }
          if (this.oneFormBatch[0].ot_price > 0) {
            this.$set(val, "ot_price", this.oneFormBatch[0].ot_price);
          }
          if (this.oneFormBatch[0].bar_code !== "") {
            this.$set(val, "bar_code", this.oneFormBatch[0].bar_code);
          }
          if (this.oneFormBatch[0].code !== "") {
            this.$set(val, "code", this.oneFormBatch[0].code);
          }
          if(this.formValidate.product_type == 1){
            if(this.oneFormBatch[0].virtual_list && this.oneFormBatch[0].virtual_list.length){
              this.$set(val, "virtual_list", this.oneFormBatch[0].virtual_list);
            }else if(this.oneFormBatch[0].disk_info){
              this.$refs.addCarMy.cartMyType = 1;
              this.$set(val, "disk_info", this.oneFormBatch[0].disk_info);
            }
          }
        }
      }
    },
    // 添加按钮
    addBtn() {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
	addShuXinBtn(){
		this.formValidate.attr_data.push({
		        name: '',
		        value: ''
		      });
	},
	clearSxAttr() {
	  this.formSxnamic.attributeName = "";
	  this.formSxnamic.attributeVal = "";
	},
    addmanyData(data){
      data.forEach(item=>{
        item.select = true
      })
      this.manyFormValidate = data;
    },
    // 立即生成
    generate(type) {
		console.log('manyFormValidate3',this.manyFormValidate)
      generateAttrApi({ attrs: this.attrs,product_type: this.formValidate.product_type }, this.formValidate.id, type)
          .then((res) => {
			  console.log('manyFormValidate4',this.manyFormValidate)
            let info = res.data.info,
                header1 = JSON.parse(JSON.stringify(info.header));
				console.log('info',info)
            if (this.$route.params.id !== "0") {
              this.addmanyData(info.value);
            }
            this.formValidate.header = header1;
			console.log("header1",header1)
            this.attrData = res.data.info.attr;
            let header = info.header;
            header.pop();
			
            this.columnsInstalM = info.header;
            // this.checkAllGroup(this.formValidate.is_sub);
            if (!this.$route.params.id && this.formValidate.spec_type === 1) {
              this.manyFormValidate.map((item) => {
                item.pic = this.formValidate.slider_image[0];
              });
              this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
            } else if (this.$route.params.id) {
              this.manyFormValidate.map((item) => {
                if (!item.pic) {
                  item.pic = this.formValidate.slider_image[0];
                }
              });
              this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
			  console.log('manyFormValidate',this.manyFormValidate)
            }
            this.getAttr();
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
    },
    // 取消
    offAttrName() {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr() {
      this.formDynamic.attrsName = "";
      this.formDynamic.attrsVal = "";
    },
    // 删除规格
    handleRemoveRole(index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2(item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [this.formDynamic.attrsVal],
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function (item, next) {
          /* eslint-disable */
          hash[next.value] ? "" : (hash[next.value] = true && item.push(next));
          return item;
        }, []);
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$Message.warning("请添加完整的规格！");
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (
                item,
                next
            ) {
              /* eslint-disable */
              hash[next] ? "" : (hash[next] = true && item.push(next));
              return item;
            },
            []);
      } else {
        this.$Message.warning("请添加属性");
      }
    },
    // 商品分类；
    goodsCategory() {
      cascaderList(1)
          .then((res) => {
            this.treeSelect = res.data.list;
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
    },
    //视视上传类型
    changeVideo(e) {
      this.formValidate.video_link = "";
      this.videoLink = "";
    },
    // 改变规格
    changeSpec() {

    },
    // 详情
    getInfo() {
      let that = this;
      that.spinShow = true;
      productInfoApi(that.$route.params.id || this.$route.query.copy)
          .then((res) => {
            let data = res.data.productInfo;
            this.infoData(data);
            this.spinShow = false;
          })
          .catch((res) => {
            this.spinShow = false;
            this.$Message.error(res.msg);
          });
    },
    // tab切换
    onhangeTab(name) {
      this.currentTab = name;
    },
    handleRemove(i) {
      this.images.splice(i, 1);
      this.formValidate.slider_image.splice(i, 1);
      this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
    },
    // 关闭图片上传模态框
    changeCancel(msg) {
      this.modalPic = false;
    },
    // 点击商品图
    modalPicTap(tit, picTit, index) {
      this.modalPic = true;
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.picTit = picTit;
      this.tableIndex = index;
    },
    // 获取单张图片信息
    getPic(pc) {
      switch (this.picTit) {
        case "danFrom":
          this.formValidate.image = pc.att_dir;
          if (!this.$route.params.id) {
            if (this.formValidate.spec_type === 0) {
              this.oneFormValidate[0].pic = pc.att_dir;
            } else {
              this.manyFormValidate.map((item) => {
                item.pic = pc.att_dir;
              });
              this.oneFormBatch[0].pic = pc.att_dir;
            }
          }
          break;
        case "danTable":
          this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
          break;
        case "duopi":
          this.oneFormBatch[this.tableIndex].pic = pc.att_dir;
          break;
        case "recommend_image":
          this.formValidate.recommend_image = pc.att_dir;
          break;
        default:
          this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
      }
      this.modalPic = false;
    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.formValidate.slider_image.push(item.att_dir);
        this.formValidate.slider_image = this.formValidate.slider_image.splice(
            0,
            10
        );
      });
      this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
      this.modalPic = false;
    },
	hasDuplicateCodes() {
	    const codes = this.formValidate.attrs.map(item => item.code);
		console.log("codes:",codes)
		console.log("codes:", new Set(codes).size !== codes.length)
	    return new Set(codes).size !== codes.length;
	},
    // 提交
    handleSubmit(name,type) {
		if(type == 2){
			
			// alert("abcd")
			//草稿不需要驗證
			this.formValidate.type = this.type;
			if (this.formValidate.spec_type === 0) {
				// alert(1)
			  this.formValidate.attrs = this.oneFormValidate;
			  this.formValidate.header = [];
			  this.formValidate.items = [];
			  const copied = JSON.parse(JSON.stringify(this.parcelNumValidateForm));
			  this.$set(this.oneFormValidate[this.parcelNumValidateFormIndex], 'parcel_list', copied);
			} else {
				// alert(2)
			  this.formValidate.items = this.attrs;
			  this.formValidate.attrs = this.manyFormValidate;
			}

			let item = this.formValidate.attrs;
						
			for (let i = 0; i < this.specsList.length; i++){
			  let data = this.specsList[i];
			}
			this.openSubimit = false;
			this.formValidate.description = this.formatRichText(this.content);
			let goodsId = [];
			this.goodsData.forEach(item=>{
			  goodsId.push(item.product_id)
			})
			this.formValidate.recommend_list = goodsId;
			// 商品标签
			let storeActiveIds = [];
			this.storeDataLabel.forEach((item)=>{
			  storeActiveIds.push(item.id)
			});
			this.formValidate.store_label_id = storeActiveIds
			// 商品参数
			this.formValidate.specs = this.specsList;
				  
			if (this.$route.query.copy) {
			  this.formValidate.id = 0;
			  this.formValidate.soure_link = '';
			}
				  this.formValidate.save_type = type
				  console.log("this.formValidate",this.formValidate)
			productAddApi(this.formValidate)
			    .then(async (res) => {
			      this.openSubimit = true;
			      this.$Message.success(res.msg);
			      if (this.$route.params.id === "0") {
			        cacheDelete().catch((err) => {
			          this.$Message.error(err.msg);
			        });
			      }
			      setTimeout(() => {
			        this.$router.push({ path: `${Setting.roterPre}/product/index` });
			      }, 500);
			    })
			    .catch((res) => {
			      this.openSubimit = false;
			      this.$Message.error(res.msg);
			    });
			
		}else{
			this.$refs[name].validate((valid) => {
			  if (valid) {
			    if (!this.formValidate.store_name.trim()) {
			      return this.$Message.warning("基础信息-商品名称不能为空");
			    }
			    this.formValidate.type = this.type;
			    if (this.formValidate.spec_type === 0) {
			      this.formValidate.attrs = this.oneFormValidate;
			      this.formValidate.header = [];
			      this.formValidate.items = [];
				  const copied = JSON.parse(JSON.stringify(this.parcelNumValidateForm));
				  this.$set(this.oneFormValidate[this.parcelNumValidateFormIndex], 'parcel_list', copied);
				  console.log("单规格")
				  
			    } else {
			      this.formValidate.items = this.attrs;
			      this.formValidate.attrs = this.manyFormValidate;
				  console.log("多规格")
			    }
				console.log("this.formValidate.attrs",this.formValidate.attrs)
				let parcel_num = 0;
				let code_num = 0;
				let ot_price_num = 0;
				let price_num = 0;
				
				for(let i = 0; i < this.formValidate.attrs.length; i++){
				    let attrsData = this.formValidate.attrs[i]
				    console.log("attrsData.parcel_list.length:",attrsData.parcel_list.length)
				    
				    if(!attrsData.parcel_list || attrsData.parcel_list.length <= 0){
				        parcel_num += 1
				    }else{
						for(let j = 0; j < attrsData.parcel_list.length; j++){
							if(attrsData.parcel_list[j].selectedSkuId <= 0 || attrsData.parcel_list[j].selectedSkuId == ""){
								parcel_num += 1
							}
						}
					}
					
				    if(!attrsData.code || !attrsData.code.toString().trim()){
				        code_num += 1
				    }
				    
				    // 处理可能为数字的情况
				    let otPrice = attrsData.ot_price;
				    if(otPrice === null || otPrice === undefined || otPrice === '' || (typeof otPrice === 'string' && !otPrice.trim())){
				        ot_price_num += 1
				    }
				    
				    let price = attrsData.price;
				    if(price === null || price === undefined || price === '' || (typeof price === 'string' && !price.trim())){
				        price_num += 1
				    }
				}
				
				console.log("验证结果:", {parcel_num, code_num, ot_price_num, price_num});
				
				// 按优先级显示错误信息
				if(parcel_num > 0){
				    return this.$Message.error("规格-请设置包裹");
				}
				if(code_num > 0){
				    return this.$Message.error('请输入商品编码');
				}
				if(ot_price_num > 0){
				    return this.$Message.error('请输入商品原价');
				}
				if(price_num > 0){
				    return this.$Message.error('请输入商品批发价');
				}
				
				
			    if (
			        this.formValidate.spec_type === 1 &&
			        this.manyFormValidate.length === 0
			    ) {
			      return this.$Message.warning("规格-请点击生成多规格");
			    }
			    let item = this.formValidate.attrs;
				let attrsChongfu = this.hasDuplicateCodes();
				if(attrsChongfu){
					return this.$Message.error('SKU重复');
				}
			    for (let i = 0; i < this.specsList.length; i++){
			      let data = this.specsList[i];
			      if(!data.name.trim()){
			        return this.$Message.error('请输入参数名称');
			      }
			      if(!data.value.trim()){
			        return this.$Message.error('请输入参数值');
			      }
			    }
			    this.openSubimit = false;
			    this.formValidate.description = this.formatRichText(this.content);
			    let goodsId = [];
			    this.goodsData.forEach(item=>{
			      goodsId.push(item.product_id)
			    })
			    this.formValidate.recommend_list = goodsId;
			    // 商品标签
			    let storeActiveIds = [];
			    this.storeDataLabel.forEach((item)=>{
			      storeActiveIds.push(item.id)
			    });
			    this.formValidate.store_label_id = storeActiveIds
			    // 商品参数
			    this.formValidate.specs = this.specsList;
					  
			    if (this.$route.query.copy) {
			      this.formValidate.id = 0;
			      this.formValidate.soure_link = '';
			    }
				this.formValidate.save_type = type
			    productAddApi(this.formValidate)
			        .then(async (res) => {
			          this.openSubimit = true;
			          this.$Message.success(res.msg);
			          if (this.$route.params.id === "0") {
			            cacheDelete().catch((err) => {
			              this.$Message.error(err.msg);
			            });
			          }
			          setTimeout(() => {
			            this.$router.push({ path: `${Setting.roterPre}/product/index` });
			          }, 500);
			        })
			        .catch((res) => {
			          this.openSubimit = false;
			          this.$Message.error(res.msg);
			        });
			  } else {
			    if (!this.formValidate.store_name) {
			      return this.$Message.warning("基础信息-商品名称不能为空");
			    } else if (!this.formValidate.cate_id.length) {
			      return this.$Message.warning("基础信息-商品分类不能为空");
			    }else if (!this.formValidate.slider_image.length) {
			      return this.$Message.warning("基础信息-商品轮播图不能为空");
			    }
				// 验证失败后的处理
				this.$nextTick(() => {
				    this.resetFormValidation();
				});
			  }
			});
		}
      
    },
	resetFormValidation() {
	    if (this.$refs.formValidate) {
	      this.$nextTick(() => {
	        this.$refs.formValidate.clearValidate();
	      });
	    }
	  },
    changeTemplate(msg) {
      this.template = msg;
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$Message.warning(error);
      }
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.slider_image = newItems;
    },
    // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI(
          "test-dialog",
          function (editor, uiName) {
            // 创建 dialog
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: "/store/widget.images/index.html?fodder=dialog",
              editor: editor,
              name: uiName,
              title: "upload pictures",
              cssRules: "width:1200px;height:500px;padding:20px;",
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "dialog-button",
              title: "upload pictures",
              cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
              onclick: function () {
                // 渲染dialog
                dialog.render();
                dialog.open();
              },
            });
            return btn;
          },
          37
      );
      window.UE.registerUI(
          "video-dialog",
          function (editor, uiName) {
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: "/store/widget.video/index.html?fodder=video",
              editor: editor,
              name: uiName,
              title: "上传视频",
              cssRules: "width:1000px;height:500px;padding:20px;",
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "video-button",
              title: "上传视频",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
              onclick: function () {
                // 渲染dialog
                dialog.render();
                dialog.open();
              },
            });
            return btn;
          },
          38
      );
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
            .replace(/style="[^"]+"/gi, "")
            .replace(/style='[^']+'/gi, "");
        match = match
            .replace(/width="[^"]+"/gi, "")
            .replace(/width='[^']+'/gi, "");
        match = match
            .replace(/height="[^"]+"/gi, "")
            .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
          /style="[^"]+"/gi,
          function (match, capture) {
            match = match
                .replace(/width:[^;]+;/gi, "max-width:100%;")
                .replace(/width:[^;]+;/gi, "max-width:100%;");
            return match;
          }
      );
      // newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
  },
};
</script>
<style scoped lang="stylus">
.video-style {
  width: 100%;
  height: 100% !important;
  border-radius: 10px;
}
.select-add {
  width: 200px;
  margin-left: 6px;
  margin-right: 10px
}
.input-display {
  display: none
}
.width-add {
  width:200px;
}
.custom-input {
  width: 100px;
  margin-right: 10px
}
.asterisk{
  position relative;
  .asteriskInfo{
    position absolute;
    color #ed4014;
    left 73px;
    top 8px;
    &.on{
      left:62px;
    }
  }
}
.specsList {
  /deep/.ivu-table-header table{
    border:0!important
  }
  /deep/.ivu-table-header thead tr th{
    padding 0!important
    background-color #EEEEEE!important;
  }
  /deep/.ivu-table-cell{
    padding 0!important
  }
  /deep/.ivu-table-border th, /deep/.ivu-table-border td{
    border-right unset;
  }
  /deep/.ivu-table td{
    height 59px;
  }
  &.on{
    width 50% !important;
    /deep/.ivu-table{
      width 100% !important;
    }
    /deep/.ivu-table td{
      height 40px;
      padding 0 !important;
    }
    /deep/.ivu-table-cell{
      padding 0 16px !important;
    }
  }
}
.form-submit {
  /deep/.ivu-card{
    border-radius: 0;
  }
  margin-bottom: 79px;
  .fixed-card {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 200px;
    z-index: 20;
    box-shadow: 0 -1px 2px rgb(240, 240, 240);

    /deep/ .ivu-card-body {
      padding: 15px 16px 14px;
    }

    .ivu-form-item {
      margin-bottom: 0;
    }

    /deep/ .ivu-form-item-content {
      margin-right: 124px;
      text-align: center;
    }

    .ivu-btn {
      height: 36px;
      padding: 0 20px;
    }
  }
}
.seeCatMy {
  color: #2d8cf0;
  cursor: pointer;
}
.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }

  .addfont {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: #1890FF;
    cursor: pointer;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: #1890FF;

  .btn {
    cursor: pointer;
    width: max-content;
  }
}
.checkAlls /deep/.ivu-checkbox-inner{
  width 14px;
  height 14px;
}
.checkAlls /deep/.ivu-checkbox-wrapper{
  font-size 12px;
}
.lines {
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}
.iosfont{
  font-size 20px!important;
}
.selectOn{
  color #2d8cf0;
}
.ifam {
  width: 344px;
  height: 644px;
  background: url('../../../assets/images/phonebg.png') no-repeat center top;
  background-size: 344px 644px;
  padding: 40px 20px;
  padding-top: 50px;
  margin: 0 auto 0 20px;

  .content {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.offShow{
  position absolute
}
.goodsShow /deep/.ivu-radio-group-vertical .ivu-radio-wrapper{
  height 35px;
  line-height 35px;
}
.videbox {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  border: 1px dashed #DDDDDD;
  line-height: 50px;
  text-align: center;
  color: #898989;
  font-size: 30px;
  font-weight: 400;
  cursor: pointer;
}
.brandName{
  /deep/.ivu-cascader{
    display inline-block
  }
}
.formValidate{
  .addClass{
    color: #1890FF;
    margin-left 14px;
    padding 9px 0;
    cursor pointer;
  }
}
.productType {
  width: 120px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #E7E7E7;
  float: left;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;
  margin-right 12px;

  &.on{
    border-color #1890FF;
  }

  .name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .title {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }

  .jiao {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid #1890FF;
    border-left: 26px solid transparent;
  }

  .iconfont {
    position: absolute;
    bottom: -3px;
    right: 1px;
    color: #FFFFFF;
    font-size 12px;
  }

}
.labelInput{
  border: 1px solid #dcdee2;
  width 50%;
  padding 0 5px;
  border-radius 5px;
  min-height 30px;
  cursor pointer;
  .span{
    color: #c5c8ce;
  }
  .iconxiayi{
    font-size 12px
  }
}
.labelClass{
  /deep/.ivu-form-item-content{
    line-height unset;
  }
}
.ivu-checkbox-wrapper{
  margin-right 19px;
}
.list-group {
  margin-left: -8px;
}

.borderStyle {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

.drag {
  cursor: move;
}

.move-icon {
  width: 30px;
  cursor: move;
  margin-right: 10px;
}

.move-icon .icondrag2 {
  font-size: 26px;
  color: #d8d8d8;
}

.maxW /deep/.ivu-select-dropdown {
  max-width: 600px;
}

#shopp-manager .ivu-table-wrapper {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
}

.noLeft {
  >>> .ivu-form-item-content {
    margin-left: 0 !important;
  }
}

#shopp-manager .ivu-form-item .tips {
  display: inline-bolck;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-top: 14px;
}

.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.uploadVideo {
  margin-left: 10px;
}

.submission {
  margin-left: 10px;
}
.form-submit .fixed-card .ivu-btn {
  height:32px;
}

.color-list .tip {
  color: #c9c9c9;
}

.color-list .color-item {
  width 70px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  margin-right: 10px;
  border-radius 2px;
  text-align center
  .num{
    color #1890FF;
    width 14px;
    height 14px;
    text-align center;
    line-height 14px;
    border-radius 50%;
    background-color #fff;
    margin-right 6px;
  }
}

.color-list .color-item.blue {
  background-color: #1E9FFF;
}

.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}

.color-list .color-item.green {
  background-color: #009688;
}

.color-list .color-item.red {
  background-color: #ed4014;
}

.color-list .color-item.colorBlue {
  background: linear-gradient(270deg, #5ECFFF 0%, #0084FF 100%);
}

.columnsBox {
  margin-right: 10px;
}

.priceBox {
  width: 100%;
}

.rulesBox {
  display: flex;
  flex-wrap: wrap;
}

.pictrueBox {
  display: inline-block;
}

.pictrueTab {
  width: 40px !important;
  height: 40px !important;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  margin-bottom 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.curs {
  cursor: pointer;
}

.inpWith {
  width: 60%;
}

.labeltop {
  >>> .ivu-form-item-label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
  .icondrop-down{
    font-size: 12px;
    margin-left: 5px;
  }
}

.video-icon {
  background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png'); // cdn.oss.9gt.net/prov1.1/1/icons.png);
  // background-color: #fff;
  background-position: -9999px;
  background-repeat: no-repeat;
}
.progress {
  margin-top: 10px;
}
.new_tab {
  >>>.ivu-tabs-nav .ivu-tabs-tab{
    padding:4px 16px 20px !important;
    font-weight: 500;
  }
}
.product_size input{
	border:0 !important;
}
#img-tip{
	line-height: 20px;
	background: #f3e4da;
	color: #181818 !important;
	padding: 10px;
}
#description-tip{
	line-height: 20px;
	color: #595656 !important;
	padding: 10px;
	margin-top:0 !important;
}
.help-icon {
  // margin-left: 5px;
  // color: #1890ff;
  font-size: 17px;
  cursor: pointer;
  vertical-align: middle;
}
.vertical-layout {
  display: block !important; /* 覆盖默认的 flex 布局 */
}
/* 标签样式 */
.vertical-layout >>> .ivu-form-item-label {
  float: none !important; /* 取消浮动 */
  display: block !important; /* 块级显示 */
  width: 100% !important; /* 占满宽度 */
  text-align: left !important; /* 左对齐 */
  padding: 0 0 10px 0 !important; /* 底部间距 */
  margin-bottom: 10px; /* 增加与内容的间距 */
  border-bottom: 1px solid #eee; /* 可选：添加分隔线 */
  font-weight: bold; /* 加粗显示 */
}
/* 内容区域样式 */
.vertical-layout >>> .ivu-form-item-content {
  display: block !important; /* 块级显示 */
  margin-left: 0 !important; /* 清除左侧间距 */
  clear: both; /* 清除浮动 */
}

/* 提示信息样式 */
.tips {
  background-color: #f9f9f9;
  border-left: 4px solid #1890ff;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}
// .help-icon:hover {
//   color: #40a9ff;
// }
</style>